<template>
<ul>
  <li v-for="(item,index) in list" :key="item">{{index+1}}、{{item}}</li>
</ul>
  <ul>
    <li v-for="(item,key,index) in obj" :key="item">{{index+1}}、{{key}}：{{item}}</li>
  </ul>
  <ul>
    <button @click="add()">添加新元素</button>
    <li :class="{moves:item.moves}" @mouseover="over(index)" v-for="(item,index) in goods" :key="item.id">{{item.id}}、姓名：{{item.name}}&nbsp;&nbsp;&nbsp;年龄：{{item.age}}</li>
  </ul>
  <div>
    {{typeof texts}}--{{texts}}--{{typeof texts}}
    <input type="text" v-model.number="texts">
  </div>
  <div>
    <label for="agree">
      <input type="checkbox" v-model="agree" id="agree">请同意<a href="#">2022入网协议</a>{{agree}}
    </label>
  </div>
  <div>
    <label for="phonenumb">
      <input type="checkbox" v-model="informs" id="phonenumb" value="手机号">获取手机号
    </label>
    <label for="modephone">
      <input type="checkbox" v-model="informs" id="modephone" value="手机型号">获取手机型号
    </label>
    <label for="ider">
      <input type="checkbox" v-model="informs" id="ider" value="身份信息">获取身份信息
    </label>
    <label for="mail">
      <input type="checkbox" v-model="informs" id="mail" value="通讯录">允许获取通讯录
    </label>
    <label for="sms">
      <input type="checkbox" v-model="informs" id="sms" value="短信功能">允许发送短信
    </label>
    <br />
    {{informs}}
  </div>
  <div>
    <label for="male">
      <input type="radio" v-model="sexs" id="male" value=1>男性
    </label>
    <label for="female">
      <input type="radio" v-model="sexs" id="female" value=0>女性
    </label>
    <br />
    {{sexs}}
  </div>
</template>

<script>
const date={
  agree:false,//true表示选中状态
  informs:[],
  sexs:0,
  list:["超级管理员","重庆","App设计"],
  name:"",
  age:null,
  id:8,
  texts:"hello vue3",
  obj:{
    name:"admin",
    sex:"超级管理员",
    age:22,
  },
  goods:[
    {id:1,name:"小明",age:32,moves:false},
    {id:2,name:"小张",age:24,moves:false},
    {id:3,name:"小明",age:22,moves:false},
    {id:4,name:"小张",age:31,moves:false},
    {id:5,name:"小明",age:20,moves:false},
    {id:6,name:"小张",age:27,moves:false},
    {id:7,name:"小明",age:34,moves:false},
    {id:8,name:"小张",age:27,moves:false},
  ]
};
export default {
  name: "App",
  data(){
    return date;
  },
  methods:{
    over(event){
      // for (let i in this.goods){
      //   event==i?this.goods[i].moves = true:this.goods[i].moves = false;
      //   // if (event==i){
      //   //   this.goods[i].moves = true;
      //   // }else {
      //   //   this.goods[i].moves = false;
      //   // }
      // }
      let goodss = this.goods.map(n=>{
        n.moves = false;
        return n;
      });
      this.goods = goodss;
      this.goods[event].moves = true;
    },
    add(){
      this.goods.unshift()
    }
  },
}
</script>

<style scoped>
.moves{
  background-color: chartreuse;
  color: brown;
}
</style>